import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:mziot/app/config/design.dart';
import 'package:mziot/app/data/device_list_entity.dart';
import 'package:mziot/app/modules/devices/controllers/choose_scene_controller.dart';
import 'package:mziot/generated/locales.g.dart';

class InsertView extends GetView {
  final List<DeviceListList>? deviceList;
  final ValueChanged<List<DeviceListList>> valueChange;
  @override
  ChooseSceneController controller = ChooseSceneController();

  InsertView(this.deviceList, this.valueChange) {
    controller.isGroup = true;
    controller.isMutile = true;
    controller.deviceList.value = deviceList ?? [];
    controller.checkSelected();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.black.withAlpha(60),
      child: Stack(
        children: [
          GestureDetector(
            behavior: HitTestBehavior.translucent,
            onTap: () {
              Get.back();
            },
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              color: Colors.white,
              height: 400,
              child: Column(
                children: [
                  _topView,
                  Expanded(child: _deviceList),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  get _topView {
    return Container(
      height: 40,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
            child: Text(
              LocaleKeys.devices_choose_device_title.tr,
              style: MFont.semi_Bold15.apply(color: MColor.xFF333333),
              textAlign: TextAlign.center,
            ),
          ),
          IconButton(
            onPressed: () => Get.back(),
            padding: EdgeInsets.zero,
            icon: Icon(
              Icons.close,
              size: 16,
            ),
          ),
        ],
      ),
    );
  }

  get _deviceList {
    final deviceCount = deviceList?.length ?? 0;

    return SafeArea(
      top: false,
      child: Column(
        children: [
          Expanded(
            child: ListView.builder(
              padding: EdgeInsets.zero,
              itemCount: deviceCount,
              itemBuilder: (ctx, index) {
                final nameText = controller.deviceList.value[index].deviceName ?? '';

                return GestureDetector(
                  behavior: HitTestBehavior.translucent,
                  onTap: () {
                    controller.selectedAction(index);
                  },
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        padding: EdgeInsets.symmetric(horizontal: 12),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          children: [
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                SizedBox(height: 24),
                                Text(
                                  nameText,
                                  style: MFont.regular13.apply(color: MColor.xFF333333),
                                  textAlign: TextAlign.start,
                                ),
                                SizedBox(height: 24),
                              ],
                            ),
                            Spacer(),
                            Obx(() {
                              final selected = controller.deviceList[index].isSelected.value;

                              return Container(
                                padding: EdgeInsets.all(5),
                                decoration: BoxDecoration(
                                  color: selected ? MColor.skin : MColor.xFFEEEEEE,
                                  borderRadius: BorderRadius.circular(10),
                                ),
                                child: Icon(
                                  Icons.check,
                                  size: 10,
                                  color: selected ? Colors.white : MColor.xFFEEEEEE,
                                ),
                              );
                            }),
                          ],
                        ),
                      ),
                      Divider(
                        color: MColor.xFFCCCCCC,
                        height: 0.5,
                        endIndent: 12,
                        indent: 12,
                      ),
                    ],
                  ),
                );
              },
            ),
          ),
          _addBottomView,
        ],
      ),
    );
  }

  get _addBottomView {
    return Container(
      width: double.infinity,
      color: Colors.white,
      padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
      child: SafeArea(
        top: false,
        child: Container(
          child: TextButton(
            style: ButtonStyle(
              shape: MaterialStateProperty.all(StadiumBorder()),
              backgroundColor: MaterialStateProperty.all(MColor.skin),
            ),
            onPressed: () {
              valueChange(controller.devices);

              Get.back();
            },
            child: Text(
              LocaleKeys.public_ok.tr,
              style: MFont.regular15.apply(color: MColor.xFFEEEEEE),
            ),
          ),
        ),
      ),
    );
  }
}
